<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar
      title="地图找房"
      right-text="按钮"
      left-arrow
      @click-left="$router.go(-1)"
    />

    <div id="container"></div>
  </div>
</template>

<script>
import { queryHouseData } from '@/api/area'
export default {
  name: 'map-page',
  async mounted() {
    const { BMapGL } = window
    const map = new BMapGL.Map('container')
    const obj = JSON.parse(window.localStorage.getItem('city'))
    const cityName = obj ? obj.label + '市' : '上海市'
    console.log(cityName)
    map.centerAndZoom(cityName, 12) // 初始化地图,设置中心点坐标和地图级别

    const res = await queryHouseData(obj.value)
    console.log(res)

    res.body.forEach((item) => {
      const point = new BMapGL.Point(item.coord.longitude, item.coord.latitude)
      const content = item.label + '<br>' + item.count
      const label = new BMapGL.Label(content, {
        position: point,
        offset: new BMapGL.Size(10, 20)
      })
      map.addOverlay(label)

      label.setStyle({
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#21b97a',
        borderRadius: '50%',
        width: '60px',
        height: '60px',
        border: '2px solid #1E90FF'
      })

      label.addEventListener('click', async function () {
        const point = new BMapGL.Point(
          item.coord.longitude,
          item.coord.latitude
        )
        map.centerAndZoom(point, 15)
        map.clearOverlays()
        const res = await queryHouseData(item.value)
        console.log(res)

        res.data.body.forEach((item) => {
          const point = new BMapGL.Point(
            item.coord.longitude,
            item.coord.latitude
          )
          const content = item.label + '<br>' + item.count
          const label = new BMapGL.Label(content, {
            position: point,
            offset: new BMapGL.Size(10, 20)
          })
          map.addOverlay(label)

          label.setStyle({
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#21b97a',
            borderRadius: '50%',
            width: '60px',
            height: '60px',
            border: '2px solid #1E90FF'
          })
        })
      })
    })
  },
  methods: {},
  computed: {},
  watch: {}
}
</script>

<style scoped lang="less">
#container {
  height: 100vh;
}
.van-nav-bar {
  ::v-deep .van-nav-bar__title {
    font-size: 18px;
  }
}
</style>
